<template>
  <center>
    <!-- <div id="main" style="width: 1000px; height: 700px"></div> -->

    <div :id="id" :style="{ height: height, width: width }"></div>
  </center>
</template>

	<script >
import * as echarts from "echarts";
import "echarts-wordcloud";

export default {
  props: {
    chartsData: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: "chart",
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "222px",
    },
  },
  data() {
    return {};
  },
  watch: {
    chartsData: {
      handler: function (newnew, oldold) {
        if (this.chartsData.length > 0) {
          this.initEchart();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.initEchart();
    return;
    var Mychart = echarts.init(document.getElementById("main"));

    var option = {
      title: {
        text: "词云",
        textStyle: {
          color: "#ffffff",
        },
      },
      backgroundColor: "#000",
      series: [
        {
          type: "wordCloud",

          //网格尺寸,尺寸越大，字体之间的间隔越大
          grideSize: 2,

          //字体的最大与最小字号
          sizeRange: [12, 35],

          //字体旋转的范围
          rotationRange: [45, 90, 135, -90],

          //词云形状 circle:圆形,pentagon:五边形
          //cardioid:苹果形或心形,star:星形,diamond:钻石,
          //triangle-forward:三角形,triangle:三角形,smooth:平滑
          shape: "pentagon",
          textStyle: {
            normal: {
              //字体随机颜色
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              //阴影距离
              shadowBlur: 1,

              //阴影颜色
              shadowColor: "#111",
            },
          },
          data: this.data1,
        },
      ],
    };
    Mychart.setOption(option);
  },

  methods: {
    initEchart() {
      const echartDom = document.getElementById(this.id);
      const myChart = echarts.init(echartDom);
      const option = {
        tooltip: {
          trigger: "item", // 触发类型
          formatter: "{b}: {c}", // 显示格式
        },
        series: [
          {
            type: "wordCloud",
            shape: "circle",
            keepAspect: false,
            // maskImage: maskImage,
            left: "center",
            top: "center",
            width: "100%",
            height: "90%",
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              // focus: 'self',
              textStyle: {
                textShadowBlur: 3,
                textShadowColor: "#333",
              },
            },
            //data属性中的value值却大，权重就却大，展示字体就却大
            data: this.chartsData,
            //       [
            //     {name: 'Farrah',value: 366},
            //     {name: "汽车",value: 900},
            //     {name: "视频",value: 606},
            //     ...
            // ]
          },
        ],
      };
      option && myChart.setOption(option);

      //随着屏幕大小调节图表
      //   window.addEventListener("resize", () => {
      //     myChart.resize();
      //   });
      // console.log(JSON.stringify(params.dataIndex));
      myChart.on("click", this.handleClick);
    },
    handleClick(params) {
      // console.log("myChart----click---:", params, "------", params.data);
      // return;
      this.$emit("SetLineChartData", params.data.name);
    },
  },
};
</script>